<template>
  <div class="smart-replenish">
    <!-- 筛选表单 -->
    <el-form :model="form" inline class="filter-form" label-width="80px">
      <el-form-item label="仓库">
        <el-select v-model="form.warehouse" placeholder="全部仓库">
          <el-option label="全部仓库" value="all"></el-option>
          <el-option label="主仓库" value="main"></el-option>
          <el-option label="副仓库" value="sub"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品类别">
        <el-select v-model="form.category" placeholder="类别">
          <el-option label="食品" value="food"></el-option>
          <el-option label="饮料" value="drink"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品">
        <el-input v-model="form.goods" placeholder="商品编码/名称"></el-input>
      </el-form-item>

      <el-form-item label="默认供应商">
        <el-select v-model="form.supplier" placeholder="默认供应商">
          <el-option label="G00001" value="G00001"></el-option>
          <el-option label="G00005" value="G00005"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="品牌">
        <el-select v-model="form.brand" placeholder="品牌">
          <el-option label="品牌A" value="brandA"></el-option>
          <el-option label="品牌B" value="brandB"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-checkbox
          v-model="form.showSuggest"
          label="只显示【建议采购量】>0的商品"
        ></el-checkbox>
      </el-form-item>

      <el-form-item>
        <el-checkbox
          v-model="form.hideZero"
          label="无发生额不显示"
        ></el-checkbox>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作栏 -->
    <div class="action-bar">
      <el-button type="info" @click="smartReplenish">智能补货</el-button>
      <el-button type="info" @click="columnSetting">列设置</el-button>
      <el-button type="info" @click="showFormula">计算公式</el-button>
      <el-button type="success" @click="generateOrder">生成购货订单</el-button>
      <el-button type="warning" @click="exportData">导出</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table
      :data="tableData"
      border
      :header-cell-style="{ background: '#F8F9FA' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column prop="code" label="商品编码" width="120" />
      <el-table-column prop="name" label="商品名称" width="180" />
      <el-table-column prop="supplier" label="默认供应商" width="180" />
      <el-table-column prop="brand" label="品牌" width="100" />
      <el-table-column prop="attr" label="属性" width="100" />
      <el-table-column prop="unit" label="单位" width="80" />
      <el-table-column
        prop="salesQty"
        label="销售在订量"
        width="120"
        align="right"
      />
      <el-table-column
        prop="stockQty"
        label="库存余额"
        width="120"
        align="right"
      >
        <template #default="scope">
          <span :style="{ color: scope.row.stockQty < 0 ? 'red' : 'black' }">
            {{ scope.row.stockQty }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="purchaseQty"
        label="采购在订量"
        width="120"
        align="right"
      />
      <el-table-column
        prop="minStock"
        label="最低库存"
        width="120"
        align="right"
      />
      <el-table-column label="建议采购量" width="120" align="right">
        <template #default="scope">
          <span
            :style="{ color: scope.row.suggestQty > 0 ? 'green' : 'black' }"
          >
            {{ scope.row.suggestQty }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[10, 20, 50]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 计算公式弹窗 -->
    <el-dialog
      title="建议采购量公式"
      v-model="formulaDialogVisible"
      width="400px"
    >
      <div>
        <p>建议采购量 = 最低库存 + 销售在订量 - 库存余额 - 采购在订量</p>
        <p class="example">
          示例：<br />
          最低库存(10) + 销售在订量(102) - 库存余额(-65) - 采购在订量(11) = 166
        </p>
      </div>
      <template #footer>
        <el-button @click="formulaDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SmartReplenish",
  data() {
    return {
      // 筛选条件
      form: {
        warehouse: "all",
        category: "",
        goods: "",
        supplier: "",
        brand: "",
        showSuggest: true, // 只显示建议采购量>0
        hideZero: false,
      },
      // 模拟5条数据
      tableData: [
        {
          code: "SP0001",
          name: "巧克力",
          supplier: "G00001 商品综合批发有限公司",
          brand: "品牌A",
          attr: "标准",
          unit: "盒",
          salesQty: 102,
          stockQty: -65,
          purchaseQty: 11,
          minStock: 10,
          suggestQty: 0,
        },
        {
          code: "SP0006",
          name: "白巧克力礼盒60g*20块",
          supplier: "G00005 食品零售供应商",
          brand: "品牌B",
          attr: "礼盒",
          unit: "盒",
          salesQty: 95,
          stockQty: -15,
          purchaseQty: 6,
          minStock: 0,
          suggestQty: 0,
        },
        {
          code: "SP0010",
          name: "果汁饮品礼盒",
          supplier: "G00005 食品零售供应商",
          brand: "品牌A",
          attr: "饮品",
          unit: "盒",
          salesQty: 100,
          stockQty: 80,
          purchaseQty: 0,
          minStock: 10,
          suggestQty: 0,
        },
        {
          code: "SP0011",
          name: "糖果150g",
          supplier: "G00005 食品零售供应商",
          brand: "品牌B",
          attr: "零食",
          unit: "包",
          salesQty: 85,
          stockQty: 81,
          purchaseQty: 5,
          minStock: 10,
          suggestQty: 0,
        },
        {
          code: "SP0015",
          name: "金语北海白雪酥132g*12",
          supplier: "G00005 食品零售供应商",
          brand: "品牌A",
          attr: "糕点",
          unit: "盒",
          salesQty: 95,
          stockQty: 72,
          purchaseQty: 5,
          minStock: 10,
          suggestQty: 0,
        },
      ],
      // 分页配置
      page: { current: 1, size: 10 },
      total: 5, // 总数据量（模拟）
      // 公式弹窗
      formulaDialogVisible: false,
      // 选中行
      selectedRows: [],
    };
  },
  mounted() {
    this.calcSuggestQty(); // 初始化计算建议采购量
  },
  methods: {
    // 查询（模拟：重新计算建议量 + 筛选）
    handleQuery() {
      this.calcSuggestQty();
      this.$message.success("查询成功");
    },

    // 计算建议采购量（核心公式）
    calcSuggestQty() {
      this.tableData.forEach((item) => {
        // 公式：最低库存 + 销售在订量 - 库存余额 - 采购在订量
        item.suggestQty =
          item.minStock + item.salesQty - item.stockQty - item.purchaseQty;
      });

      // 筛选：只显示建议采购量>0的商品
      if (this.form.showSuggest) {
        this.tableData = this.tableData.filter((item) => item.suggestQty > 0);
      }
    },

    // 智能补货（示例：可扩展接口调用）
    smartReplenish() {
      this.$message.info("智能补货逻辑待实现");
    },

    // 列设置（示例：可扩展弹窗配置）
    columnSetting() {
      this.$message.info("列设置逻辑待实现");
    },

    // 显示公式弹窗
    showFormula() {
      this.formulaDialogVisible = true;
    },

    // 生成购货订单（需选中行）
    generateOrder() {
      if (this.selectedRows.length === 0) {
        this.$message.warning("请选择商品");
        return;
      }
      this.$message.success(
        `生成订单：${this.selectedRows.map((i) => i.name).join(", ")}`
      );
    },

    // 导出数据（示例）
    exportData() {
      this.$message.info("导出逻辑待实现");
    },

    // 分页-每页条数变化
    handleSizeChange(val) {
      this.page.size = val;
      // 实际需调用接口刷新数据
    },

    // 分页-当前页变化
    handleCurrentChange(val) {
      this.page.current = val;
      // 实际需调用接口刷新数据
    },

    // 多选事件
    handleSelectionChange(val) {
      this.selectedRows = val;
    },
  },
};
</script>

<style scoped>
.smart-replenish {
  padding: 20px;
  background: #fff;
}

.filter-form {
  margin-bottom: 16px;
}

.action-bar {
  margin: 12px 0;
  display: flex;
  gap: 8px;
}

.pagination {
  margin-top: 16px;
  text-align: right;
}

.example {
  margin-top: 8px;
  color: #666;
}

.el-table-column {
  text-align: center;
}
</style>